<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<!-- include css -->
<head lang="en" th:replace="fragments/header :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper" id="index">
    <!-- 头部-->
    <div th:replace="fragments/mainHeader :: nav">
    </div>
    <aside class="main-sidebar">
        <!-- 左侧菜单-->
        <div th:replace="fragments/mainSidebar :: sidebar">
        </div>
    </aside>
    <div class="content-wrapper">
        <div id="app" class="con" >
            <el-input  v-model="input_id" placeholder="请输入用户ID"></el-input>
            <button  v-on:click="labelDetail">标签详情</button>
            <button  v-on:click="open">用户画像</button>
            <el-dialog title="用户画像-详情"  :visible.sync="outerVisible" width="80%" top="50px" custom-class="pDialog" >
                <div class="row" :model="cusporData.customer" v-loading="dialogLoading" element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading">
                    <div class="col-md-3" >
                        <div class="basicInfo" v-show="isShow">
                            <div class="hd">
                                <div class="img"><i class="fa fa-home"></i></div>
                                <div class="tit">
                                    <h3>基础信息</h3>
                                </div>
                            </div>
                            <div class="bd">
                                <table cellpadding="0" cellspacing="0" border="0" :model="cusporData">
                                    <tr>
                                        <th>用户ID：</th>
                                        <td>{{input_id}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9" >
                        <div class="upDiv" v-show="isShow">
                            <div class="userPortrayal">
                                <div class="upSor" v-for="name in cusporData.map.parentName">
                                    <ul >
                                        <li v-for="child in cusporData.map[name]">{{child}}</li>
                                    </ul>
                                    <div class="tit">{{name}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9" v-show="!isShow"><span>用户ID：{{input_id}} 没有查询结果</span></div>
                </div>
            </el-dialog>
            <el-dialog
                    title="用户标签详情"
                    :visible.sync="innerVisible">
                <template>
                    <el-table :data="labelDetails" style="width: 100%">
                        <el-table-column prop="phone_no" label="用户编号" width="180">
                        </el-table-column>
                        <el-table-column prop="parent_label" label="父级标签" width="180">
                        </el-table-column>
                        <el-table-column prop="label" label="标签">
                        </el-table-column>
                    </el-table>
                </template>
            </el-dialog>
        </div>
    </div>
    <div class="control-sidebar-bg"></div>
</div>
<!-- include js-->
<div th:include="fragments/footer :: footer">
</div>
<style>
    .menu-active{
        background-color: #e6f8fe;
    }
    .con{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -5em;
        margin-left: -9em;

        width: 18em;
        height: 10em;

    }
    .label_search_dialog {
        width: 60%
    }
    .label_select_dialog{
        width: 70%
    }
    .pDialog{ height: calc(100% - 100px);width: 80% }
    .pDialog .el-dialog__body{ height: calc(100% - 49px); overflow: auto; width: 100%; }
    .scroll-bar{
        height: 200px;
        overflow-y: auto;
    }
    .labelList .el-checkbox{
        display: inline-block;
        margin: 0 1em 1em;
        width: 11em;
        overflow: hidden;
        text-overflow:ellipsis;
    }
    .searchDiv .el-input__inner{
        width: 220px;
    }
    .el-collapse-item__header{
        height: 23px;
        line-height: 23px;
    }
    span.el-tag.el-tag--success{
        color: #333;
    }
    .cusLabDialog{
        width: 55%;
    }
    .label_search_butt{
        padding: 8px 67px 8px 67px;
    }
    .label_search_form .el-form-item{
        margin-bottom: 2px;
    }
    .el-table th>.cell{
        text-align: center;
    }
    .el-table-column--selection .cell{
        text-align: center;
    }
    .search_table tr{
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .el-collapse-item__header{
        /*background-color: #a8d4f2;*/
    }
    .scroll-bar{
        min-height:150px;
        height: 90%;
        overflow: auto;
    }
    .sel-span{
        display: block;
        margin-top: 5px;
    }
</style>
<script >
    new Vue({
        el: "#app",
        data() {
            return {
                input_id: '2463779',
                innerVisible:false,
                outerVisible:false,
                dialogLoading:false,
                labelDetails:[],
                cusporData:{
                    // customer:{
                    //     phoneNo:null,
                    //     id:0,
                    //     custId:0,
                    //     custName:'',
                    //     addressoj:'',
                    //     brandName:''
                    // },
                    map:{
                        parentName:[]
                    }
                },
                isShow:false,
            }
        },
        methods:{
            labelDetail(){
                var _self = this;
                var id = this.input_id;
                if(isNaN(id) || !id.trim().length>0){
                    alert("用户ID不能为空并且是数字类型")
                }else{
                    $.ajax({
                        url: 'labels/user/'+id,
                        method: "get",
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            _self.labelDetails = data;
                            _self.innerVisible = true;
                        },
                        error: function () {
                        }
                    });
                }

            },
            open() {
                var id = this.input_id;

                if(isNaN(id) || !id.trim().length>0){
                    alert("用户ID不能为空并且是数字类型")
                }else {
                    this.outerVisible = true;
                    this.dialogLoading = true;
                    var that = this;
                    $.ajax({
                        url: 'labels/users/'+id+'/all/',
                        method: "get",
                        contentType: "application/json;charset=UTF-8",
                        success: function (res) {
                            that.cusporData = res.data;
                            that.cusporData.map=res.data;
                            if(that.cusporData.map["isNull"]){
                                that.isShow=false;
                            }else {
                                that.isShow=true;
                            }
                            that.formatData(that.cusporData);//若二级标签下无三级标签，添加“无”标签
                            // that.componentData.id = res.data.customer.id;
                            // setTimeout(function() {
                            //     that.chartInit();
                            // }, 300);
                            that.dialogLoading = false;
                        },
                        error: function () {

                        }
                    });
                }
            },
            formatData(data){
                if(data.map != null){
                    var parentNames = data.map.parentName;
                    parentNames.forEach(function(parentName){
                        if(data.map[parentName].length == 0){
                            data.map[parentName].push("无");
                        }
                    });
                }
            },
        }

    });
    jQuery(function ($) {
        $(".breadcrumb a").on("click", function () {
            var url = $(this).attr("href");
            $.ajax({
                cache: false,
                type: 'GET',
                url: url,
                error: function (xhr) {
                },
                success: function (data) {
                    $(".content-wrapper").html(data);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
